<template>
  <div class="app-container">
    <!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
    <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
    </el-form-item>

    <el-form-item>
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
    </el-form-item>

    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
</el-form>
    <!-- 工具条 -->
      <!--点击批量删除，调用removeRows()方法-->
        <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>


        <!-- 复选框绑定事件，每次选择事件都会触发 ，每次触发都会调用handleSelectionChange方法传递id-->
        <el-table stripe style="width: 100%" 
          :data="list" @selection-change="handleSelectionChange">
	      <el-table-column type="selection" width="55" />

        

        <el-table-column label="序号" width="70" align="center">
            <template slot-scope="scope">
                {{ scope.$index + 1 + (page - 1) * limit  }}
            </template>
        </el-table-column>

        <el-table-column prop="hosname" label="医院名称" width="180" />
        <el-table-column prop="hoscode" label="医院编号" width="160" />
        <el-table-column prop="apiUrl" label="地址" width="200"/>
        <el-table-column prop="contactsName" label="联系人"/>

        <el-table-column prop="status" label="状态">
          <!--scope.row当前行的JSON对象，必须使用template标签，包裹在里面-->
            <template slot-scope="scope">
              <!--scope.row当前行的JSON对象-->
                {{ scope.row.status==1?'可用':'不可用' }}
            </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <!--编辑页面的路由path: 'edit/:id-->
                 <router-link :to="'/hospset/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
                <!--按钮绑定事件方法，scope.row.id 得到每行的id值-->
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
                
            </template>
        </el-table-column>
        <el-table-column label="锁定操作" width="280" align="center">
   <template slot-scope="scope">
      <el-button v-if="scope.row.status==1" type="primary" size="mini" 
         icon="el-icon-delete" @click="lockHospSet(scope.row.id,0)">锁定</el-button>
      <el-button v-if="scope.row.status==0" type="danger" size="mini" 
         icon="el-icon-delete" @click="lockHospSet(scope.row.id,1)">解锁</el-button>
   </template>
</el-table-column>
    </el-table>

    <!-- 分页 -->
<el-pagination
               :current-page="page"
               :page-size="limit"
               :total="total"
               style="padding: 30px 0; text-align: center;"
               layout="total, prev, pager, next, jumper"
               @current-change="fetchData"
               />
    
  </div>
</template>


<script>
import hospset from '@/api/hospSet'
export default {

  data() {// 定义数据
     return {
      listLoading: true, // 是否显示loading信息
      list: [], // 数据列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      searchObj: {},// 查询条件
      multipleSelection: [] // 批量选择中选择的医院id的记录列表，注意：不是每行的id
    }
  },
    
  created() { // Vue实例创建完成，执行created钩子函数
    this.fetchData()
  },



    
  methods: {
    //清空的方法
    resetData() {
    this.searchObj = {}
    this.fetchData()
},
    fetchData(page = 1) {
    // 调用api层获取数据库中的数据

    this.page = page;//传的page参数是几就查询第几页的数据【默认查询的是第一页】
    this.listLoading = true;

    hospset.getHospSetList(this.page, this.limit, this.searchObj).then(response => {
        if (response.success === true) {
            this.list = response.data.rows;//获取当前页的数据的集合
            this.total = response.data.total;//获取总记录数【分页控件使用】
        }
        this.listLoading = false;
    });
},
  //得到删除的id值
  removeDataById(id){
      //点击确定执行then方法
      this.$confirm('确定删除？','提示',{onfirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(()=>{
         //调用接口实现删除的功能
         hospset.removeById(id).then(resp=>{
          //刷新页面：再次调用fetchData方法
            this.fetchData()

            //提示信息
              this.$message({
                  type: 'success',
                  message:'删除成功!'
              })
          })
      })
  },


// 当表格复选框选项发生变化的时候触发,获取选择的复选框对应的id值
handleSelectionChange(selection) {
  //将id赋值给multipleSelection属性
  this.multipleSelection = selection
},

//批量删除的方法
removeRows() {
   this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
   }).then(() => { //确定执行then方法
      var idList = []
      //遍历数组得到每个id值，设置到idList里面
      for(var i=0;i<this.multipleSelection.length;i++) {
         var obj = this.multipleSelection[i]
         var id = obj.id
         idList.push(id)
      }
      //调用接口
      hospset.removeRows(idList).then(response => {
          //提示
          this.$message({type: 'success',message: '删除成功!'})
          //刷新页面
          this.fetchData(1)
      })
   })
},
lockHospSet(id,status) {
   hospset.lockHospSet(id,status).then(response => {
       //重新加载数据
       this.fetchData()
   })
},
  }
    
}
</script>




